<script setup lang="ts">
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { DArrowRight, Close } from '@element-plus/icons-vue'
import { baseToolsStore } from '@/stores/baseTools'
import router from '@/router'
const useToolsStore = baseToolsStore()
const { groupLeft, groupRight } = storeToRefs(useToolsStore)
// 接受父组件pName
const props = defineProps({
  // 盒子样式类名
  pName: {
    type: String,
    default: 'l-box',
  },
  // 动画方向
  transition: {
    type: String,
    default: 'left',
  },
  // 是否展示查看更多按钮
  showMore: {
    type: Boolean,
    default: true,
  },
  showMore2: {
    type: Boolean,
    default: true,
  },
  // 自定标题
  title: {
    type: String,
    default: '',
  },
})

// const firstBox = ref(true) // 标题显示
const leftBox = ref(false) // 左侧隐藏
const rightBox = ref(false) // 右侧隐藏
const hidden = (pName) => {
  if (pName == 'l-box') groupLeft.value = !groupLeft.value
  if (pName == 'r-box') groupRight.value = !groupRight.value
  // firstBox.value = !firstBox.value
  if (props.transition == 'left') {
    leftBox.value = !leftBox.value
  } else if (props.transition == 'right') {
    rightBox.value = !rightBox.value
  }
}
// 暴露 hidden 方法
defineExpose({
  hidden,
})

// 计算路由并返回相关 className
const groupPathName = computed(() => {
  const currentPath = router.currentRoute.value.path
  if (currentPath === '/home') return 'home-group-box' // 首页
  if (currentPath === '/supply') return 'supply-group-box' // 供应链
  if (currentPath === '/finance') return 'finance-group-box' // 财务
  if (currentPath === '/human') return 'human-group-box' // 人力
  if (currentPath === '/dealer') return 'dealer-group-box' // 经销商
})
</script>

<template>
  <div :class="`group-box ${groupPathName}`">
    <transition :name="transition">
      <div
        v-if="pName == 'l-box' ? groupLeft : groupRight"
        :class="`first-box ${
          showMore && showMore2 ? 'first-box-' + pName : ''
        }`"
      >
        <div class="title">
          <el-button
            class="btn"
            size="small"
            @click="hidden(pName)"
            v-if="showMore && showMore2"
            alt="更多"
          >
            {{ $t('bi_front_distributorseemore') }}
            <el-icon class="icon"><DArrowRight /></el-icon>
          </el-button>

          <slot name="title" />
        </div>
        <slot name="first" />
        <div class="group-horn group-horn-tl" />
        <div class="group-horn group-horn-tr" />
        <div class="group-horn group-horn-l" />
        <div class="group-horn group-horn-r" />
      </div>
    </transition>

    <transition :name="transition">
      <div class="side-box" :class="pName" v-if="leftBox || rightBox">
        <div class="side-box-content">
          <h1 class="side-box-title">
            <el-button
              class="close-btn"
              size="small"
              @click="hidden(pName)"
              alt="关闭"
            >
              <el-icon class="icon">
                <Close />
              </el-icon>
            </el-button>
            {{ title }}
          </h1>
          <slot name="second" />
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.group-box {
  width: 100%;

  .first-box {
    position: relative;
    &-l-box > .title {
      flex-direction: row-reverse;
    }
    .group-horn {
      position: absolute;
      bottom: 0;
      width: 25px;
      height: 25px;
      border: #00a2ff 1px solid;

      &.group-horn-tl {
        border-bottom: none;
        border-right: none;
        top: 0;
        left: 0;
      }

      &.group-horn-tr {
        border-bottom: none;
        border-left: none;
        top: 0;
        right: 0;
      }
      &.group-horn-l {
        border-top: none;
        border-right: none;
        bottom: 0;
        left: 0;
      }

      &.group-horn-r {
        border-top: none;
        border-left: none;
        bottom: 0;
        right: 0;
      }
    }
  }
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #5df5f3;
    padding: 0 10px;
    // margin-bottom: 20px;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(18, 47, 119, 0.6);
    .btn {
      background-color: transparent;
      border: none;
      color: #5df5f3;
      border-color: #5df5f3;
      // float: right;
      .icon {
        font-size: 16px;
      }
    }
  }
}
.side-box {
  position: fixed;
  top: 75px;
  width: calc(25vw - 0px);
  height: calc(100vh - 75px);
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 10;

  &.l-box {
    left: 0;
    .side-box-title {
      flex-direction: row-reverse;
    }
  }
  &.r-box {
    right: 0;
  }
  &.l-box,
  &.r-box {
    background-color: rgba(37, 37, 39, 0.5);
    // :deep(.box-com) {
    //   margin-bottom: 25px;
    // }
  }
  .side-box-content {
    height: auto;
    width: 100%;
    .side-box-title {
      font-size: 24px;
      font-weight: bold;
      text-indent: 1em;
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #5df5f3;
      background: rgba(18, 47, 119, 0.6);
      // background-color: rgba(11, 69, 202, 0.5);
      padding: 0 10px;
      .close-btn {
        background-color: transparent;
        border: none;
        color: #5df5f3;
        font-size: 18px;
      }
    }
  }
}

.human-group-box {
  // 人力组盒子样式覆盖
  .title,
  .side-box {
    background-color: rgba(16, 85, 119, 0.3);
    .side-box-title {
      background-color: rgba(16, 85, 119, 0.3);
    }
  }
}
</style>
